<!DOCTYPE html>
<html>
<head>
    <!-- from: https://phaser.io/sandbox/frame -->
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="author" content="gsw945" />
    <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" />
    <title>Phaser Demo With Parcel</title>
    <link rel="stylesheet" href="styles.css" />
    <style type="text/css">
        body,
        html {
            margin: 0;
            padding: 0;
            border: 0;
        }
        #game {
            border: 1px solid #fa1;
        }
    </style>
</head>
<body>
    <!-- <h1>Hello, World!</h1> -->
    <div class="page-body">
        <div id="Stats-output"></div>
        <div id="game"></div>
    </div>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.1/jquery.min.js" type="text/javascript"></script>
    <script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/phaser/3.52.0/phaser.min.js" type="text/javascript"></script>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/dat-gui/0.7.7/dat.gui.min.js" type="text/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/three.js/110/three.min.js" type="application/javascript"></script>
    <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/stats.js/16/Stats.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        //初始化统计对象
        function initStats() {
            var stats = new Stats();
            //设置统计模式
            stats.setMode(0); // 0: fps, 1: ms
            //统计信息显示在左上角
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '2px';
            stats.domElement.style.top = '2px';
            //将统计对象添加到对应的<div>元素中
            document.getElementById("Stats-output").appendChild(stats.domElement);
            return stats;
        }

        var stats;

        var config = {
            type: Phaser.WEBGL,
            parent: 'game',
            transparent: true,
            backgroundColor: 0x2d2d2d,
            width: 800,
            height: 600,
            zoom: 1,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: preload,
                create: create,
                update: update,
                render: render
            }
        };

        var camera;
        var scene;
        var renderer;
        var cube;
        var controls;

        var game = new Phaser.Game(config);

        function preload ()
        {
            console.log(Phaser.VERSION);

            this.load.image('eye', '/assets/demos/lance-overdose-loader-eye.png');
        }

        function create ()
        {
            stats = initStats();

            var sprite = this.add.sprite(100, 100, 'eye').setInteractive();

            sprite.on('pointerdown', function (pointer) {

                this.setTint(0xff0000);

            });

            sprite.on('pointerout', function (pointer) {

                this.clearTint();

            });

            sprite.on('pointerup', function (pointer) {

                this.clearTint();

            });

            var w = this.textures.getFrame('eye').width;
            var h = this.textures.getFrame('eye').height;
            console.log(`w: ${w}, h: ${h}`);

            var ext = this.add.extern();
            
            renderer = new THREE.WebGLRenderer({
                canvas: this.game.canvas,
                context: this.game.context,
                antialias: true
            });
            renderer.autoClear = false;
            renderer.gammaInput = true;
            renderer.gammaOutput = true;
            renderer.toneMapping = THREE.ReinhardToneMapping;
            renderer.toneMappingExposure = 3;
            
            scene = new THREE.Scene();
            
            camera = new THREE.PerspectiveCamera(50, 800 / 600, 0.01, 1000);
            camera.position.x = -20;
            camera.position.y = 10;
            camera.position.z = 10;
            camera.lookAt(scene.position);
            
            var geometry = new THREE.BoxGeometry(4, 4, 4);
            var material = new THREE.MeshLambertMaterial({color: 0xff0000});

            cube = new THREE.Mesh(geometry, material);
            cube.castShadow = true;
            cube.position.x = -4;
            cube.position.y = 30;
            cube.position.z = 10;
            scene.add(cube);

            var light = new THREE.HemisphereLight(0x443333, 0x222233, 4);
            // var light = new THREE.SpotLight(0xffffff);
            light.position.set(-40, 60, -10);
            light.castShadow = true;
            scene.add(light);

            ext.render = function (prenderer, pcamera, pcalcMatrix)
            {
                renderer.state.reset();

                renderer.render(scene, camera);
            };

            controls = new function () {
                this.speed = 1;
                this.rotationSpeed = 0.01;
                this.x = 0;
                this.y = 0;
                this.z = 0;
                this.rotationSpeedX = 0.05;
                this.rotationSpeedY = -0.01;
                this.rotationSpeedZ = 0.01;
                this.site = "gsw945.com";
                this.site2 = "";
                this.visible = true;
                this.hello = function() {
                    alert("hello, dog");
                };
                this.color0 = "#ffae23"; // CSS string
                this.color1 = [0, 128, 255]; // RGB array
                this.color2 = [0, 128, 255, 0.3]; // RGB with alpha
                this.color3 = {h: 350, s: 0.9, v: 0.3}; // Hue, saturation, value
            };

            const gui = new dat.GUI();
            gui.remember(controls);
            gui.add(controls, 'speed', 0, 10).listen();
            gui.add(controls, 'rotationSpeed', {'低速': 0.005, '中速': 0.01,'高速': 0.1});
            gui.add(controls, 'x', -20, 90).step(2).name("横向(x)");
            gui.add(controls, 'y', -80, 10).step(2).name("纵向(y)");
            gui.add(controls, 'z', -60, 20).step(2).name("垂直(z)");
            gui.add(controls, 'rotationSpeedX').step(0.01);
            gui.add(controls, 'rotationSpeedY', -0.5, 0.5).step(0.01);
            gui.add(controls, 'rotationSpeedZ').min(-1).max(1).step(0.01);
            gui.add(controls, 'site');
            gui.add(controls, 'site2', ['gsw945.com', 'patheagames.com', 'github.com']);
            gui.add(controls, 'visible');
            gui.add(controls, 'hello');
            gui.addColor(controls, 'color0');
            gui.addColor(controls, 'color1');
            gui.addColor(controls, 'color2');
            var colorController = gui.addColor(controls, 'color3');
            colorController.onChange(function(value) {
                console.log("onChange:" + value)
            });
            colorController.onFinishChange(function(value) {
                console.log("onFinishChange" + value)
            });
            gui.domElement.style = 'position:absolute;top:0px;right:0px;';
        }

        function update ()
        {
            stats.update();

            cube.rotation.x += controls.rotationSpeedX;
            cube.rotation.y += controls.rotationSpeedY;
            cube.rotation.z += controls.rotationSpeedZ;

            cube.position.x = controls.x;
            cube.position.y = controls.y;
            cube.position.z = controls.z;
        }

        function render () {
            //
        }
    </script>
</body>
</html>